<template>
    <header v-if="headFlag">
        <div class="head">
            <Login :dialogVisible="dialogVisible" v-on:Value="Value" />
            <div class="containe">
                <div class="logo">
                    <img
                        src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-logo.png"
                        alt=""
                    />
                </div>
                <div
                    :class="{ strick: true, active: showMenu }"
                    @click="showMenu = !showMenu"
                >
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <nav :class="{ active: showMenu }">
                    <ul>
                        <li>
                            <router-link to="/"
                                ><span @click="showMenu = false">{{
                                    $t('menu.article')
                                }}</span></router-link
                            >
                        </li>
                        <li>
                            <router-link to="/archives"
                                ><span @click="showMenu = false">{{
                                    $t('menu.archive')
                                }}</span></router-link
                            >
                        </li>
                        <li>
                            <router-link to="/konwledge"
                                ><span @click="showMenu = false">{{
                                    $t('menu.knowledge')
                                }}</span></router-link
                            >
                        </li>
                        <li>
                            <router-link to="/page/mesboard"
                                ><span @click="showMenu = false">{{
                                    $t('menu.msgboard')
                                }}</span></router-link
                            >
                        </li>
                        <li>
                            <router-link to="/page/about"
                                ><span @click="showMenu = false">{{
                                    $t('menu.about')
                                }}</span></router-link
                            >
                        </li>
                        <li class="icons">
                            <el-button @click="login">登录</el-button>
                        </li>
                        <li class="icons">
                            <Search />
                        </li>
                        <li class="icons">
                            <theme />
                        </li>
                        <li class="icons">
                            <language />
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        
    </header>
    <header class="header" v-else></header>
</template>

<script>
import Language from './Language.vue';
import Theme from './Theme.vue';
import Login from "./Login.vue"
import Search from './Search.vue';
export default {
    props: ['headFlag'],
    components: {
        Language,
        Theme,
        Search,
        Login
    },
    methods: {
        login(){
            this.dialogVisible = true;
        },
        Value: function (Value) {
            // Value就是子组件传过来的值
            this.dialogVisible = Value;
        },
    },
    watch: {
        headFlag() {
            if (!arguments[0]) {
                this.showMenu = arguments[0];
            }
        },
    },
    data() {
        return {
            showMenu: false,
            dialogVisible:false,
        };
    },
};
</script>

<style scoped lang="scss">
.header {
    background: #e7eaee !important;
    border-bottom: none;
    width: 100%;
    height: 68px;
    position: absolute;
}
.head {
    width: 100%;
    color: var(--main-text-color);
}
header {
    height: 68px;
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    border-bottom: 1px solid #ccc;
    display: flex;
    background: var(--bg);
    z-index: 201;
    color: var(--main-text-color);
    .containe {
        margin: 0 auto;
        height: 100%;
        display: flex;
        align-items: center;
        .strick {
            display: none;
        }
        .logo {
            min-width: 100px;
            height: 64px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 3rem;
        }
        nav {
            flex-grow: 1;
            ul {
                width: 100%;
                height: 100%;
                // height: 68px;
                li {
                    float: left;
                    height: 100%;
                    padding: 0 12px;
                    // line-height: 68px;
                    a {
                        display: flex;
                        width: 100%;
                        height: 100%;
                        align-items: center;
                        color: var(--main-text-color);
                    }
                    .router-link-exact-active {
                        color: var(--primary-color);
                    }
                }
                li a:hover {
                    color: var(--primary-color);
                }
                .icons {
                    float: right;
                    cursor: pointer;
                    height: 100%;
                    padding-left: 10px;
                    .iconsDiv {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        svg {
                            font-size: 24px;
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .containe {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }
}
@media (max-width: 768px) {
    .head {
        height: 64px;
        position: relative;
        .containe {
            margin-left: -50px;
        }
    }
    nav {
        display: none;
    }
    header {
        nav {
            .logo {
                text-align: left;
                margin-left: 2rem !important;
            }
        }
    }
    nav.active {
        position: absolute;
        top: 64px;
        left: 0;
        width: 100%;
        background: var(--bg);
        color: var(--main-text-color);
        display: block;
        ul {
            display: flex;
            flex-direction: column;
            align-items: center;
            li {
                height: 50px;
                line-height: 50px;
                text-align: center;
            }
        }
        a {
            color: var(--main-text-color);
        }
        ul li:hover,
        ul li:hover a {
            color: var(--primary-color);
        }
    }
    .strick {
        display: block !important;
        position: absolute;
        right: 15px;
        top: 20px;
        div {
            width: 25px;
            height: 4px;
            border-radius: var(--border-radius);
            background-color: var(--primary-color);
            opacity: 1;
            transition: all 0.25s ease-in-out 0s;
        }
        div:nth-child(2) {
            margin: 5px 0;
        }
    }
    .strick.active {
        div:nth-child(1) {
            transform: translateY(9px) rotate(45deg);
        }
        div:nth-child(3) {
            transform: translateY(-9px) rotate(-45deg);
        }
        div:nth-child(2) {
            opacity: 0;
        }
    }
    .strick {
        display: block;
    }
}

@media (min-width: 769px) {
    ul {
        height: 68px;
        line-height: 68px;
        .iconsDiv {
            padding-top: 15px;
        }
    }
}
@media (min-width: 992px) {
    .containe {
        width: 960px;
    }
    .logo {
        margin-right: 4rem;
    }
}
@media (min-width: 1200px) {
    .containe {
        width: 1360px;
    }
    .logo {
        margin-right: 4rem;
    }
}
</style>
